import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const PC_MIN_WIDTH = 1024;
const PAD_MIN_WIDTH = 768;
const MIN_SIDE_BAR_WIDTH = '80px';
const MAX_SIDE_BAR_WIDTH = '200px';

const store = new Vuex.Store({
    state: {
        foldMenu: true,
        maxSideBarWidth: MAX_SIDE_BAR_WIDTH,
        minSideBarWidth: MIN_SIDE_BAR_WIDTH,
        sideBarAnimationTime: '1s',

        mediaQueryDevSize: {
            pcMinSize: `${PC_MIN_WIDTH}px`,
            padMinSize: `${PAD_MIN_WIDTH}px`
        },

        devType: 'pc'
    },

    getters: {
        pcMinDevSize() {
            return PC_MIN_WIDTH;
        },

        padMinDevSize() {
            return PAD_MIN_WIDTH;
        }
    },

    mutations: {
        updateMenuStatus(state, status) {
            state.foldMenu = status;
        },

        updateDevType(state, type) {
            state.devType = type;
            state.minSideBarWidth = type === 'mobile' ? '0' : MIN_SIDE_BAR_WIDTH;
        }
    }
});

export default store;